<script setup>
import {computed, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import icons from "@/assets/static/fontawesomeIcon.json";
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {createChannel, createChannelTag, getChannelTag} from "@/api/group.js";
import emitter from "@/utils/EventBus.js";
import {Modal} from "bootstrap"

const createChannelTagModal = ref()
const createChannelModal = ref()
const route = useRoute()
const closeBtn = ref()
const channelTag = ref([])
const tagId = ref(0)

const newTagName = ref('')

const chooseIcon = (name) => {
  newChannelData.value.icon = name
}

const newChannelData = ref({
  group_id: computed(() => route.params.groupId),
  channelName: '',
  icon: 'hashtag',
  tag_id: computed(() => tagId.value)
})

const create = async () => {
  const res = await createChannel(newChannelData.value)
  console.log(tagId.value)
  if (res.status === 200) {
    emitter.emit('add channel')
    closeBtn.value.click()
  }
}

const createNewTag = async () => {
  const res = await createChannelTag({groupId: route.params.groupId, tagName: newTagName.value})
  newTagName.value = ''
  if (res.status === 200) {
    emitter.emit('update channelTag')
    await fetchChannelTag(route.params.groupId)
    createChannelTagModal.value.hide()
    createChannelModal.value.show()
  }
}

const fetchChannelTag = async (gid) => {
  const res = await getChannelTag(gid)
  channelTag.value = res.data
}

onMounted(async ()=> {
  await fetchChannelTag(route.params.groupId)
  createChannelModal.value = new Modal(document.getElementById('createChannelModal'))
  createChannelTagModal.value = new Modal(document.getElementById('createChannelTag'))
})

onBeforeRouteUpdate(async (to, from, next)=>{
  await fetchChannelTag(to.params.groupId)
  next()
})

</script>

<template>
  <div class="modal fade" id="createChannelModal" tabindex="-1" aria-labelledby="createChannelModal" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
    <div class="modal-dialog modal-dialog-centered d-flex justify-content-center">
      <div class="modal-content w-75">
        <div class="modal-header">
          <h5 class="modal-title" >创建新频道</h5>
          <button type="button" ref="closeBtn" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="channelName" class="form-label">频道名</label>
            <input v-model="newChannelData.channelName" type="text" class="form-control" id="channelName">
          </div>

          <div class="mb-3">
            <label for="channelTag" class="d-flex justify-content-between align-items-center form-label">
              频道分组
              <button class="btn btn-sm btn-info" data-bs-target="#createChannelTag" data-bs-toggle="modal">新建</button>
            </label>
            <select v-model="tagId" id="channelTag" class="form-select" aria-label="Default select example">
              <option value="0">默认</option>
              <template v-for="channel in channelTag">
                <option :value="channel.id">{{channel.tag_name}}</option>
              </template>
            </select>
          </div>

          <div class="mb-3">
            <span>频道图标：</span>
            <button class="btn btn-sm btn-outline dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              <font-awesome-icon class="pe-1" :icon="['fas', newChannelData.icon]" size="xl" />
            </button>
            <div class="dropdown-menu p-0">
              <div class="d-flex p-2 flex-wrap" style="width: 150px; box-sizing: content-box">
                <template  v-for="icon in icons">
                  <div @click="chooseIcon(icon)" class="iconPick d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                    <font-awesome-icon :icon="['fas', icon]" />
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" ref="closeBtn" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" @click="create" class="btn btn-primary">创建</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="createChannelTag" tabindex="-1" aria-labelledby="createChannelTag" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
    <div class="modal-dialog modal-dialog-centered d-flex justify-content-center">
      <div class="modal-content w-75">
        <div class="modal-header">
          <h5 class="modal-title" >创建频道分组</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div class="mb-3">
            <label for="newTagName" class="form-label">分组名</label>
            <input v-model="newTagName" type="text" class="form-control" id="newTagName" required>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-bs-target="#createChannelModal" data-bs-toggle="modal">返回</button>
          <button type="button" @click="createNewTag" class="btn btn-primary">创建</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.iconPick {
  cursor: pointer;
}

.iconPick:hover {
  background-color: var(--bs-tertiary-bg);
}
</style>